<!--
 * @Author: your name
 * @Date: 2022-05-05 09:16:14
 * @LastEditTime: 2022-09-20 16:04:16
 * @LastEditors: wangwang 2723008256@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\components\floating\floating.vue
-->
<!--
 右侧浮窗，客服、电话、回到顶部
-->
<template>
  <div class="content">
    
  </div>
</template>

<script>
import { sysinfo } from "../../api/http";
export default {
  props: {
    step: {
      //控制速度
      type: Number,
      default: 80,
    },
  },
  data() {
    return {
      flag: true,
      picFlag: true,
      activeIndex: 5,
      lists: [
        {
          di: 1,
          url1: require("../../assets/img/images/floting_phone1.png"),
          url2: require("../../assets/img/images/floting_phone2.png"),
          name1: "客服",
          name2: "电话",
        },
        {
          di: 2,
          url1: require("../../assets/img/images/floting_wchat1.png"),
          url2: require("../../assets/img/images/floting_wchat2.png"),
          name1: "客服",
          name2: "微信",
        },
        {
          di: 3,
          url1: require("../../assets/img/images/floting_xcx1.png"),
          url2: require("../../assets/img/images/floting_xcx2.png"),
          name1: "",
          name1: "小程序",
        },
        {
          di: 4,
          url1: require("../../assets/img/images/floting_mes1.png"),
          url2: require("../../assets/img/images/floting_mes2.png"),
          name1: "意见",
          name2: "反馈",
        },
      ],
      telphone: "", //客服电话
      kf_file_url: "", //客服二维码
      xcx_file_url: "", //小程序二维码
    };
  },
  created() {
    sysinfo().then((res) => {
      // console.log(res, "右侧悬浮窗");
      this.telphone = res.retRes.telphone;
      this.kf_file_url = res.retRes.kf_file_url;
      this.xcx_file_url = res.retRes.xcx_file_url;
    });
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    //鼠标移入变色
    showit1() {
      let li1 = document.getElementsByClassName("phone")[0];
      li1.style.background = "#08A579";
      li1.style.color = "#FFF";
      this.picFlag = true;
      this.activeIndex = 1;
    },
    //鼠标移出
    ovit1() {
      let li1 = document.getElementsByClassName("phone")[0];
      li1.style.background = "#FFF ";
      li1.style.color = "#939599";
      this.picFlag = false;
      this.activeIndex = 1;
    },
    //鼠标移入变色
    showit2() {
      let li2 = document.getElementsByClassName("wechat")[0];
      li2.style.background = "#08A579";
      li2.style.color = "#FFF";
      this.picFlag = true;
      this.activeIndex = 2;
    },
    //鼠标移出
    ovit2() {
      let li2 = document.getElementsByClassName("wechat")[0];
      li2.style.background = "#FFF ";
      li2.style.color = "#939599";
      this.picFlag = false;
      this.activeIndex = 2;
    },
    //鼠标移入变色
    showit3() {
      let li3 = document.getElementsByClassName("xcx")[0];
      li3.style.background = "#08A579";
      li3.style.color = "#FFF";
      this.picFlag = true;
      this.activeIndex = 3;
    },
    //鼠标移出
    ovit3() {
      let li3 = document.getElementsByClassName("xcx")[0];
      li3.style.background = "#FFF ";
      li3.style.color = "#939599";
      this.picFlag = false;
      this.activeIndex = 3;
    },
    //鼠标移入变色
    showit4() {
      let li4 = document.getElementsByClassName("fankui")[0];
      li4.style.background = "#08A579";
      li4.style.color = "#FFF";
      this.picFlag = true;
      this.activeIndex = 4;
    },
    //鼠标移出
    ovit4() {
      let li4 = document.getElementsByClassName("fankui")[0];
      li4.style.background = "#FFF ";
      li4.style.color = "#939599";
      this.picFlag = false;
      this.activeIndex = 4;
    },

    windowScroll() {
      // 滚动条距离页面顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop); //打印距离顶部的距离
      if (scrollTop > 500) {
        this.flag = true;
      } else if (scrollTop < 500) {
        this.flag = false;
      }
    },
    //回到顶部操作
    backTop() {
      //   console.log(document.documentElement.scrollTop);
      document.documentElement.scrollTop -= this.step;
      if (document.documentElement.scrollTop > 0) {
        var time = setTimeout(() => this.backTop(this.step), 15);
      } else {
        clearTimeout(time);
      }
    },
    //前往意见反馈
  goFk(){
    console.log(123)
    this.$router.push({
      name:'FeedBack'
    })
  },
  },
  //清除监听页面滚动
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
};
</script>
<style>
.el-tooltip__popper.is-light{
  border-color:#dedede;
  border: 1px solid #dedede;
  width:120px;
  /* height:120px; */
  
}
</style>
<style lang="less" scoped>
.content {
  position: fixed;
  top: 200px;
  right: 20px;
  width: 48px;
  // height: 400px;
  .evm{
    width: 120px;
    height: 120px;
  }
  /deep/.el-tooltip__popper.is-light{
    border: 0 !important;
  }
  ul {
    width: 60px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    color: #939599;
    // background: yellow;
    box-shadow: -1px -2px 8px 0px rgb(0 0 0 / 12%);
    li {
      padding: 20px 0;
      height: 59px;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      color: #939599;
      span {
        display: block;
        text-align: center;
      }
    }
    li:nth-of-type(3) {
      height: 40px;
    }
    // .wechat {
    //   color: #fff;
    //   background: #08a579;
    // }
  }
  .goTop {
    width: 60px;
    margin-top: 20px;
    background-color: #fff;
    height: 54px;
    border-radius: 10px;
    font-size: 12px;
    color: #939599;
    text-align: center;
    cursor: pointer;
    box-shadow: -1px -2px 8px 0px rgb(0 0 0 / 12%);
    i {
      font-size: 25px;
      // margin-bottom: 5px;
    }
    span {
      display: block;
      text-align: center;
    }
  }
  .goTop:hover {
    background-color: #08a579;
    color: #fff;
  }
}
</style>
